<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兵哥打字通</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .zm {
            width: 30px;
            height: 30px;
            position: absolute;
            text-align: center;
            line-height: 30px;
            color: #ffffff;
            font-size: 20px;
            font-weight: bold;
        }

        #box {
            width: 600px;
            height: 100vh;
            background: black;
            margin: 0 auto;
            position: relative;
        }

        #over {
            border: 1px solid gold;
            background: rgba(255, 255, 255, 0.5);
            color: red;
            width: 400px;
            height: 200px;
            line-height: 200px;
            font-size: 40px;
            text-align: center;
            position: absolute;
            left: 100px;
            top: 200px;
            z-index: 999;
            display: block;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="over">
            Enter键 开始/暂停
        </div>
    </div>
</body>
<script>
    //字母列表
    let zmList = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'

    //返回随机数的方法
    function getRandom(min, max) {
        return Math.ceil(Math.random() * (max - min)) + min
    }

    //随机返回颜色的方法
    function createColor() {
        let str = '0123456789ABCDEF'
        let res = '#'
        for (let i = 0; i < 6; i++) {
            res += str[Math.floor(Math.random() * 16)]
        }
        return res;
    }
    //创建元素的方法
    function c(v) {
        return document.createElement(v)
    }
    //获取box元素
    let box = document.querySelector("#box")
    //获取over元素
    let over = document.querySelector("#over")
    let maxLeft = box.offsetWidth - 30    //最大Left
    let maxTop = box.offsetHeight - 30    //最大Top

    //生成字母
    let timer1 = null

    //dom.offsetTop  每次都值是最新的值
    //dom.style.top 每次返回的都是初始值
    //设置字母下落
    let timer2 = null

    window.onkeydown = function (e) {
        //获取当前按键的字符
        let key = e.key.toUpperCase();
        if (key === 'ENTER') {
            if(over.innerText === "Good Game ~") return
            if (timer1 === null) {
                over.style.display = "none"
                timer1 = setInterval(() => {
                    //创建一个字母div
                    let div = c("div")        //创建div
                    div.classList.add('zm')   //添加样式
                    let num = getRandom(0, 25)          //返回一个0到25之间的随机数
                    div.innerText = zmList[num]        //从中字母列表中获取指定的字母
                    let left = getRandom(0, maxLeft)    //返回字母div的X轴位置
                    div.style.left = left + 'px'
                    div.style.top = '0px'
                    div.style.background = createColor()
                    box.append(div)
                }, 500);
            }else{
                over.style.display = "block"
                clearInterval(timer1)
                timer1 = null;
            }
            if (timer2 === null) {
                timer2 = setInterval(() => {
                    //获取屏幕中所有的字母div
                    let divs = document.querySelectorAll('.zm')
                    //循环所有的字母div
                    for (let i = 0; i < divs.length; i++) {
                        //返回每个字母div的top
                        let top = divs[i].offsetTop
                        top = top + 20   //top每次加20
                        //如果top超过范围，删除该字母div
                        if (top > maxTop) {
                            divs[i].remove()   //删除当前字母
                            over.innerText = "Good Game ~"
                            over.style.display = "block"
                            clearInterval(timer1)
                            clearInterval(timer2)
                        } else {
                            divs[i].style.top = top + 'px'
                        }
                    }
                }, 200);
            }else{
                clearInterval(timer2)
                timer2 = null;
            }
        }

        //获取屏幕中所有的字母div
        let divs = document.querySelectorAll('.zm')
        //循环所有的字母div
        for (let i = 0; i < divs.length; i++) {
            if (divs[i].innerText === key) {
                divs[i].remove()
            }
        }
    }
</script>

</html>